<template>
  <el-card class="box-card">
    <el-form ref="form" :inline="true" class="userHeader">
      <el-form-item label="创建人：">
        <el-input v-model="common.createPerson" placeholder="请输入创建人" />
      </el-form-item>
      <el-form-item label="点赞数量：">
        <el-input v-model="common.diggCount" placeholder="请输入点赞数量" />
      </el-form-item>
      <el-form-item label="阶段：">
        <el-input v-model="common.stage" placeholder="请输入阶段" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getuserList()">查询</el-button>
        <el-button>重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <el-card class="contentTable">
    <div>
      <el-button type="primary" @click="edit('add')">新增</el-button>
      <!-- <el-button type="danger">批量删除</el-button> -->
    </div>
    <el-table border style="margin: 10px 0;" :data="tabelData">
      <el-table-column type="selection"></el-table-column>
      <el-table-column 
        fixed
        label="序号"
        type="index"></el-table-column>
      <el-table-column label="阶段" prop="stage"></el-table-column>
      <el-table-column label="点赞数量" prop="diggCount" show-overflow-tooltip></el-table-column>

      <!-- <el-table-column label="用户名" prop="name">
        <template #default="{ row }">
          <el-tooltip :content="row.name" placement="top" append-to-body trigger="manual" :visible="hoveredRow === row">
            <span class="cell" @mouseenter="hoveredRow = row" @mouseleave="hoveredRow = null">
              {{ row.name }}
            </span>
          </el-tooltip>
        </template>
      </el-table-column> -->
      <el-table-column label="创建人" prop="createPerson"></el-table-column>
      <el-table-column label="创建时间" prop="createDate"></el-table-column>
      <!-- <el-table-column label="操作" width="260px" align="center">
        <template #default="scoped">
          <el-button link type="primary" :icon="UserFilled">角色分配</el-button>
          <el-button link type="primary" :icon="Edit"  @click="edit('edit',scoped.row)">编辑</el-button>
          <el-button link type="danger" :icon="Delete">删除</el-button>
        </template>
      </el-table-column> -->
    </el-table>
    <div class="demo-pagination-block">
      <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 50]"
        :background="true" :total="total" layout=" prev, pager, next, jumper,->,total, sizes"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
  </el-card>
    <el-drawer v-model="drawer" :direction="direction">
    <template #header>
      <h4>添加用户</h4>
    </template>
    <template #default>
      <el-form>
        <el-form-item label="阶段">
           <el-input v-model="common.stage" placeholder="请输入阶段" />
        </el-form-item>
        <el-form-item label="点赞数量">
          <el-input v-model="common.diggCount" placeholder="点赞数量" />
        </el-form-item>
        <el-form-item label="创建人">
          <el-input v-model="common.createPerson" placeholder="请输入创建人" />
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="">取消</el-button>
        <el-button type="primary" @click="btndata">确定</el-button>
      </div>
    </template>
  </el-drawer>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';
import { UserFilled, Edit, Delete } from '@element-plus/icons-vue'
import { getThes, thresholdtAdd } from '../../../api/acl/user';
import { ElMessage, type DrawerProps } from 'element-plus'

//编辑
const drawer = ref(false);
const direction = ref<DrawerProps['direction']>('rtl')
const edit = (item: string) => {
  drawer.value = true;
//   common.id = row.id
//   common.stage= row.stage
//   common.diggCount =row.diggCount
//   common.createPerson = row.createPerson
}
onMounted(() => {
  getuserList()
})
const btndata = async()=>{
 let data = (await thresholdtAdd(common)) as any
  if(data){
    ElMessage({
      message: '保存成功',
      type: 'success',
    })
    common.id = ''
    common.stage= ''
    common.diggCount = ''
    common.createPerson = ''
    getuserList()
  }
}
//表格
const tabelData = ref([])
const common = reactive({
  createPerson: "",
  diggCount: "",
  stage:"",
  "id": '',
})
const getuserList = async () => {
  let params = {
    createPerson: common.createPerson,
    diggCount: common.diggCount,
    stage: common.stage,
    page: currentPage.value,
    pageSize: pageSize.value,
  }
  let data = (await getThes(params)) as any;
  console.log(data,'data')
  if (data.code == 200) {
    tabelData.value = data.data;
    total.value = data.data.total;
  }
}
// 分页
let currentPage = ref(1);
let pageSize = ref(7);
let total = ref(0);
const handleSizeChange = (val: number) => {
  pageSize.value = val;
  getuserList()
};
const handleCurrentChange = (val: number) => {
  currentPage.value = val;
  getuserList()
};

</script>
<style lang="less" scoped>
.box-card {
  height: 80px;

  .userHeader {
    display: flex;
    justify-content: space-between;
  }
}

.contentTable {
  margin: 10px 0;
}

.el-popper.is-dark {
  color: var(--el-bg-color);
  width: 300px;
  // z-index: 0!important;
}

.cell {
  display: block;
  // max-width: 100px;
  height: 25px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>